<template>
  <div class="item-list">
    <ul>
      <li
        v-for="(item, index) in lists"
        :key="index"
        :style="{
          padding: liPadding,
          background: liBackground,
          display: liDisplay,
        }"
      >
        <a
          :href="item.path"
          @click="choose(index)"
          :style="{ fontSize: fontsize + 'px', color: aColor }"
          >{{ item.name }}</a
        >
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Item",
  props: {
    lists: [],
    size: Number,
    padding: "",
    background: "",
    color: "",
    ulDisplay: "",
  },
  data() {
    return {
      ischoose: 0,
      fontsize: this.size,
      liPadding: this.padding,
      liBackground: this.background,
      aColor: this.color,
      liDisplay: this.ulDisplay,
    };
  },
};
</script>
<style scoped>
li {
  margin-right: 10px;
}
a:hover {
  color: red;
}
a:first-child {
  color: red;
}
</style>